<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>角色管理</title>
    <script src="common.js"></script>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f4f7f6;
            color: #333;
        }

        .header {
            padding: 20px;
            background-color: #fff;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .header h1 {
            margin: 0;
            font-size: 24px;
        }

        .header button {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s ease;
        }

        .header button:hover {
            background-color: #0056b3;
        }

        .role-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 20px;
            padding: 20px;
            overflow-y: auto;
        }

        .role-card {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            padding: 15px;
            transition: all 0.3s ease;
        }

        .role-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }

        .role-img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            border-radius: 8px;
            margin-bottom: 15px;
        }

        .role-card h3 {
            margin: 0 0 10px 0;
            color: #333;
        }

        .role-card p {
            margin: 0 0 15px 0;
            color: #666;
            font-size: 14px;
            line-height: 1.4;
        }

        .action-buttons {
            display: flex;
            gap: 10px;
        }

        .action-buttons button {
            flex: 1;
            padding: 8px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s ease;
        }

        .btn-edit {
            background-color: #28a745;
            color: white;
        }

        .btn-edit:hover {
            background-color: #218838;
        }

        .btn-danger {
            background-color: #dc3545;
            color: white;
        }

        .btn-danger:hover {
            background-color: #c82333;
        }

        @media (max-width: 768px) {
            .role-grid {
                grid-template-columns: 1fr;
                padding: 10px;
            }

            .header {
                padding: 15px;
                flex-direction: column;
                gap: 10px;
                text-align: center;
            }

            .header button {
                width: 100%;
            }
        }
        
        .header-actions {
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .search-input {
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 14px;
            min-width: 200px;
            transition: border-color 0.3s ease;
        }

        .search-input:focus {
            border-color: #007bff;
            outline: none;
        }

        @media (max-width: 768px) {
            .header-actions {
                flex-direction: column;
                width: 100%;
            }

            .search-input {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>角色列表</h1>
        <div class="header-actions">
            <button onclick="location.href='edit_role.html'">新建角色</button>
            <input type="text" id="searchInput" placeholder="搜索角色..." class="search-input">
        </div>
    </div>


    <script>
        // 搜索和筛选功能
        function filterRoles(searchTerm) {
            const roleCards = document.querySelectorAll('.role-card');
            roleCards.forEach(card => {
                const roleName = card.querySelector('h3').textContent;
                const roleDesc = card.querySelector('p').textContent;
                const searchText = (roleName + roleDesc).toLowerCase();
                
                if (searchText.includes(searchTerm.toLowerCase())) {
                    card.style.display = '';
                } else {
                    card.style.display = 'none';
                }
            });
        }

        // 添加搜索输入监听
        document.addEventListener('DOMContentLoaded', () => {
            const searchInput = document.getElementById('searchInput');
            searchInput.addEventListener('input', (e) => {
                filterRoles(e.target.value);
            });
        });
    </script>
    <div class="role-grid" id="roleContainer"></div>

    <script>
        // 加载角色列表
        async function loadRoles() {
            try {
                const response = await fetch('/role/queryAll');
                const data = await response.json();
                renderRoles(data.data);
            } catch (error) {
                console.error('加载角色失败:', error);
                showMessage('加载角色失败', 'error');
            }
        }

        // 渲染角色卡片
        function renderRoles(roles) {
            const container = document.getElementById('roleContainer');
            container.innerHTML = roles.map(role => `
                <div class="role-card">
                    <img src="${role.imgPath}" class="role-img" alt="${role.name}" >
                    <h3>${role.name}</h3>
                    <p>${role.prompt || '暂无描述'}</p>
                    <p>${role.remark || '暂无备注'}</p>
                    <div class="action-buttons">
                        <button class="btn-edit" onclick="location.href='edit_role.html?id=${role.id}'">编辑</button>
                        <button class="btn-danger" onclick="deleteRole('${role.id}')">删除</button>
                    </div>
                </div>
            `).join('');
        }

        // 删除角色
        async function deleteRole(roleId) {
            if (!confirm('确定要删除这个角色吗？')) return;
            
            try {
                const response = await fetch(`/role/delete`, {
                    method: 'DELETE',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ id: roleId })
                });
                
                if (response.ok) {
                    loadRoles(); // 刷新列表
                    showMessage('删除成功', 'success');
                } else {
                    throw new Error('删除失败');
                }
            } catch (error) {
                console.error('删除失败:', error);
                showMessage('删除失败', 'error');
            }
        }
    
        // 初始化加载
        document.addEventListener('DOMContentLoaded', loadRoles);
    </script>
</body>
</html>